<template>
	<div id="invoice">
		<van-nav-bar title="申请开票" left-text="返回" left-arrow @click-left="onClickLeft" />
		<!-- <van-divider :style="{ color: 'rgb(240, 173, 78)', borderColor: 'rgb(240, 173, 78)'}">开票申请须知</van-divider>
		<center>
			<b class="center-title2">（仅限已缴费用户使用<b class="center-title2">未缴费用户请勿申请</b>）</b>
		</center>
		<br />
		<b class="center-title3">开票为电子普票，直接发送至开票者邮箱，请确保邮箱可以正常使用</b><br />
		#有疑问请联系：严经理，13164620214 -->
		<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa'}">请填写开票信息</van-divider>
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
			<el-form-item label="申请人" prop="name" required>
				<el-input disabled type="name" v-model="ruleForm.name" placeholder="申请人" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="申请人电话" prop="phone" required>
				<el-input disabled type="phone" v-model="ruleForm.phone" placeholder="申请人电话" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="申请人邮箱" prop="email" required>
				<el-input disabled type="email" v-model="ruleForm.email" placeholder="申请人邮箱" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="开票金额" prop="money" required>
				<el-input type="money" v-model="ruleForm.money" placeholder="开票金额" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="抬头" required prop="taitou">
				<el-autocomplete label="抬头" v-model="ruleForm.taitou" :fetch-suggestions="querySearch" :trigger-on-focus="false" placeholder="请输入发票抬头"
				 @select="handleSelect">
					<template slot-scope="{ item }">
						<div class="name">{{ item.taitou }}</div>
					</template>
				</el-autocomplete>
			</el-form-item>
			<el-form-item label="税号" required prop="invoice">
				<el-autocomplete label="税号" v-model="ruleForm.invoice" :fetch-suggestions="querySearchBytariff" :trigger-on-focus="false"
				 placeholder="请输入税号" @select="handleSelect">
					<template slot-scope="{ item }">
						<span class="addr">{{ item.tariff_number }}</span>
					</template>
				</el-autocomplete>
			</el-form-item>
			<el-form-item label="请填写地址及电话" prop="add_tel">
				<el-input type="add_tel" v-model="ruleForm.add_tel" placeholder="请填写地址及电话" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="开户行及银行卡号" prop="bank_card">
				<el-input type="bank_card" v-model="ruleForm.bank_card" placeholder="开户行及银行卡号" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="纸质文件邮寄地址" prop="send_addr">
				<el-input type="send_addr" v-model="ruleForm.send_addr" placeholder="纸质文件邮寄地址" autocomplete="off"></el-input>
			</el-form-item>
		</el-form>
		<van-cell-group :border="false">
			<van-field required readonly label="缴费渠道" :error="channelErr" :value="ruleForm.channel " placeholder="请选择缴费渠道" @click="showPicker = true" />
		</van-cell-group><br />
		<center>
			<van-button color="linear-gradient(to right, #4bb0ff, #1989fa)" class="btn" @click="submitForm('ruleForm')">提交</van-button>
		</center>
		<van-popup v-model="showPicker" position="bottom">
			<van-picker show-toolbar :columns="['银行转账','微信','支付宝']" @cancel="showPicker = false" @confirm="onConfirm" />
		</van-popup>
		<van-popup v-model="showPicker2" position="bottom">
			<van-picker show-toolbar :columns="invoiceArr" @cancel="showPicker2 = false" @confirm="onConfirm2" />
		</van-popup>
	</div>
</template>

<script>
	import {
		validation
	} from './validate'
	export default {
		transition: 'need',
		data() {
			return {
				channelErr:false,
				ruleForm: {
					name: this.$route.params.details.liaisons,
					phone: this.$route.params.details.liaisons_tel,
					email: this.$route.params.details.liaisons_email,
					money:'',
					taitou: this.$route.params.newInvArr[0].invoice.taitou,
					invoice: this.$route.params.newInvArr[0].invoice.tariff_number,
					add_tel:'',
					bank_card:'',
					send_addr:''
				},
				rules: {
					name: [{
						required: true,
						message: "",
						trigger: "blur"
					}],
					email: [{
						required: true,
						message: "",
						trigger: "blur"
					}],
					phone: [{
						required: true,
						message: "",
						trigger: "blur"
					}],
					taitou: [{
						required: true,
						message: "抬头不能为空",
						trigger: "blur"
					}],
					invoice: [{
						required: true,
						message: "税号不能为空",
						trigger: "blur"
					}],
					money: [{
						required: true,
						message: "开票金额不能为空",
						trigger: "blur"
					}]
				},
				invoiceArr: this.$route.params.invoiceArr,
				order_number: this.$route.params.order_number,
				active: 0,
				showPicker: false,
				showPicker2: false,
			}
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1);
			},
			onConfirm(value) {
				this.ruleForm.channel = value;
				this.channel = value;
				this.showPicker = false;
			},
			onConfirm2(value) {
				this.invoice = value.id;
				this.invoiceText = value.taitou;
				this.showPicker2 = false;
			},
			submitForm(formName) {
				if(!this.channel){
					this.channelErr=true
				}
				this.$refs[formName].validate(valid => {
					if (valid) {
						if(!this.channel){
							this.channelErr=true
						}else{
							this.$axios.post('/api/invoice', {
								consumer_id: this.$store.state.user.id,
								channel: this.channel,
								taitou: this.ruleForm.taitou,
								tariff_number: this.ruleForm.invoice,
								add_tel: this.ruleForm.add_tel,
								bank_card: this.ruleForm.bank_card,
								send_addr: this.ruleForm.send_addr,
								money: this.ruleForm.money,
								order_number: this.order_number
							}).then(res => {
								if (res.data.code == 200) {
									this.$toast({
										message: '提交申请成功！',
										type: 'success'
									});
									this.$router.go(-1);
								} else {
									this.$toast({
										message: res.data.message,
										type: 'fail'
									});
								}
								this.$refs[formName].resetFields();
							})
						}
					}
				})
			},
			//输入抬头模糊匹配
			querySearch(queryString, cb) {
				var restaurants = this.invoiceArr;
				var results = [];
				if (restaurants.length > 0) {
					for (const i in restaurants) {
						restaurants[i].value = restaurants[i].taitou
					}
					results = queryString ?
						restaurants.filter(this.createFilter(queryString)) :
						restaurants;
				}
				// 调用 callback 返回建议列表的数据
				cb(results);
			},

			//税号模糊匹配
			querySearchBytariff(queryString, cb) {
				var restaurants = this.invoiceArr;
				var results = [];
				if (restaurants.length > 0) {
					//value改为税号
					for (const i in restaurants) {
						restaurants[i].value = restaurants[i].tariff_number
					}
					results = queryString ?
						restaurants.filter(this.createFilter(queryString)) :
						restaurants;
				}
				// 调用 callback 返回建议列表的数据
				cb(results);
			},

			//匹配
			createFilter(queryString) {
				return restaurant => {
					return (
						restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
					);
				};
			},
			//模糊匹配赋值
			handleSelect(item) {
				this.taitou = item.taitou;
				this.invoice = item.tariff_number;
			}
		},
		created() {
			console.log(this.$route.params, 'this.$route.params')
		},
		//缓存也会走的钩子
		activated() {
			let invoiceArr = this.$route.params.invoiceArr;
			for (let key in invoiceArr) {
				invoiceArr[key].text = invoiceArr[key].taitou;
			}
			this.invoiceArr = invoiceArr;
			this.order_number = this.$route.params.order_number;
		}
	}
</script>

<style lang="less">
	#invoice {
		min-height: 100%;
		background: white;
		padding: 20px;
		box-sizing: border-box;

		/deep/ .el-form-item__label{
			width: 100%;
			text-align: left;
		}

		/deep/ .el-autocomplete{
			width: 100%;
		}

		.hr {
			border: 1px solid #c5cfdb;
		}

		.center-title {
			color: rgb(240, 173, 78);
			font-weight: bold;
		}

		.center-title2 {
			color: rgb(23, 140, 223);
			font-weight: bold;
		}

		.center-title3 {
			color: rgb(217, 83, 79);
			font-weight: bold;
		}

		.required-tag {
			color: #ee0a24;
			font-size: 30px;
		}

		.title {
			color: #323233;
			font-size: 30px;
		}

		.btn {
			width: 90%;
			margin-top: 80px;
		}
	}
</style>
